<template>
  <div style='margin:50px'>
    <header>路径展示</header>
    <el-table
      v-loading="main_loading"
      :data="path_list"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @expand-change='expand'
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column 
        type="expand"
      >
        <template slot-scope="props">
          <el-table
          v-loading='child_loading'
          :data='detail'
          style="width:100%"
          >
            <el-table-column
              label='阶段'
            >
            <template slot-scope="scope">
                阶段 {{ scope.row.stage }}
            </template>
            </el-table-column>
            <el-table-column
              label='阶段名'
              prop='stage_name'
            >
            </el-table-column>
            
            <el-table-column
              label='阶段课程'
            >
            <template slot-scope="scope">
              <ul>
                <li v-for="(course, index) in scope.row.coursedata" :key=index>
                  {{ course.name }}
                </li>
              </ul>
            </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="路径 ID"
        :width="90"
        align="center"
        prop="id">
      </el-table-column>
      <el-table-column
        align="center"
        :width="140"
        label="路径图片">
        <template slot-scope="scope">
            <el-row class="demo-avatar demo-basic">
              <el-col :span="12">
                <el-avatar shape="square" :size="100" fit="fill" :src="get_photo(scope.row.img)"></el-avatar>
              </el-col>
            </el-row>
          </template>
      </el-table-column>
      <el-table-column
        :width="200"
        label="路径名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
      <el-table-column label="操作" align="center" width='200px' prop=''>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button type="primary" :disabled="amount" round @click='del_multi'>批量删除</el-button>
    
    <el-button @click="toggleSelection()" round>取消选择</el-button>
    <br>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
import { path_delete, get_path_get, get_pathinfo_get } from "../axios_api/api";
export default {
data() {
    return {
      // 批处理开关
      amount:true,
      main_loading:true,
      child_loading:true,
      getRowKeys(row){
        return row.id
      },
      expands: [10],
      detail:[],
      multipleSelection: [],
      path_list: []
    }
},
created(){
    this.get_path()
},
methods:{
  //批量删除
  del_multi(){
    this.main_loading = true
    var li = []
    for(let i=0;i<this.multipleSelection.length;i++){
      li.push(this.multipleSelection[i].id)
    }
    var params = {id_list:String(li), method:'delete'}
    console.log(params)
    path_delete(params).then(resp=>{
      this.$message(resp)
      this.get_path()
      this.main_loading = false
    })

  },
  // 取消选择
  toggleSelection(rows) {
    if (rows) {
      rows.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row);
      });
    } else {
      this.$refs.multipleTable.clearSelection();
    }
  },
  handleDelete(index, Data){
    console.log(index)
    console.log(Data)
  },
  handleEdit(index, Data){
    console.log(index)
    console.log(Data)
  },
  expand(row, expandedRows) {
    this.child_loading = true
    var that = this
    if (expandedRows.length) {
      that.expands = []
      if (row) {
        that.expands.push(row.id)
      }
    } else {
      that.expands = []
    }
    // 请求详细数据
    var params = {pid: row.id}
    get_pathinfo_get(params).then(resp=>{
      this.detail = resp.stagedata
      this.child_loading = false
    })
  },
  // 多选
  handleSelectionChange(val) {
      this.multipleSelection = val;
        console.log(this.multipleSelection)
      if(this.multipleSelection.length==0){
        this.amount = true
      }else{
        this.amount = false
      }
        console.log(this.multipleSelection)
      },
  // 动态拼接头图
  get_photo(img) {
    if (img == 'path.jpg') {
      return require('../../../static/img/path.jpg')
    } else {
      // return img 返回七牛云图片链接
      return 'http://q9j3oo8by.bkt.clouddn.com/' + img
    }
  },
  // 获取路径信息
  get_path(){
      get_path_get().then(resp=>{
          console.log(resp.data)
          this.path_list = resp.data
          this.main_loading = false
      })
  }
}
}
</script>